<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 17:03:38
 * @LastEditTime: 2024-07-29 17:03:45
-->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import register from "./base/register.vue"
import upload from "./base/upload.vue"
import api from "./base/api.vue"


const activeName = ref('注册与访问')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>

<template>
    <el-card class="card" :body-style="{ padding: '10px 20px 105x 20px' }">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="注册与访问" name="注册与访问"></el-tab-pane>
            <el-tab-pane label="上传设置" name="上传设置"></el-tab-pane>
            <el-tab-pane label="Api安全" name="Api安全"></el-tab-pane>
        </el-tabs>

        <!-- 注册与访问 -->
        <template v-if="activeName === '注册与访问'">
           <register/>
        </template>
        <!-- 上传设置 -->
        <template v-else-if="activeName === '上传设置'">
           <upload/>
        </template>
        <!-- 上传设置 -->
        <template v-else-if="activeName === 'Api安全'">
           <api/>
        </template>
    </el-card>
  
</template>

<style lang="scss" scoped>


</style>
